import React from 'react'
import './bg-photo.css'
import { useDispatch } from 'react-redux';
import { addImage } from '../../../store/index.ts'; 

function Bgphoto() {
   
 const categories = [
        { title: '扁平几何', images: ['https://sns-webpic-qc.xhscdn.com/202409261904/574205e8fa47faf861613e0673bf575d/1040g008312h3kmkb76505nf350o08v6sj9ida08!nc_n_webp_mw_1', 'https://sns-webpic-qc.xhscdn.com/202409261905/3392fba24445434578f1f3843b8e6fb9/1040g2sg314mvnkp76i705o72qkd08glgneei6to!nc_n_webp_mw_1'] },
        { title: '商务科技', images: ['https://sns-webpic-qc.xhscdn.com/202409261905/55ea74d1c39f6ab8e403ff7d8e605517/1040g2sg314ft627f6i005ogrb07k0ov1orlnbao!nc_n_webp_mw_1', 'https://sns-webpic-qc.xhscdn.com/202409261905/74d9d9936b3b11968918de7f2df43c51/1000g0082hsh39c2io0005n92meg4k4snp5b64go!nc_n_webp_mw_1'] },
        { title: '政府党建', images: ['https://sns-webpic-qc.xhscdn.com/202409261906/7d64b85e42df8d2bd7dcf32f227340f6/1040g00830s9sqfujiq005ocs8t18c1dir6asu3g!nc_n_webp_mw_1', 'https://sns-webpic-qc.xhscdn.com/202409261906/168371140210c419af53f42339af2c4f/1040g2sg316puv2e7jk705oss8hk9i627cgokh0o!nc_n_webp_mw_1'] },
        { title: '文艺清新', images: ['https://sns-webpic-qc.xhscdn.com/202409261907/8b5a6f234505e0115a694c6751ccd6da/1040g008314n037vl6g605ph9m6ehonr7ikvele0!nc_n_webp_mw_1', 'https://sns-webpic-qc.xhscdn.com/202409261908/ff669a8ee739206d0fcf5ae4efe8cc38/1040g2sg310g6mc9q6e105np1h2ig991c9v0pm10!nc_n_webp_mw_1'] }
    ];
     
  const dispatch = useDispatch();

  const onImageClick = (src) => {
    dispatch(addImage(src)); // 将所选图片加到 Redux Store 中
    console.log(dispatch(addImage(src)))
  };
  
    return (
        <div className='bgpho_box'>
            {categories.map((category, index) => (
                <div style={{width:'100%',height:'60%'}} key={index} className={`bgpho-${category.title === '扁平几何' ? 'nature' : category.title === '商务科技' ? 'foot' : category.title === '政府党建' ? 'build' : 'person'}`}>
                    {/* 标题 */}
                    <div className='bgpho-title'>
                        <h3>{category.title}</h3>
                        <span>全部<i className='iconfont icon-youjiantou' /></span>
                    </div>

                    {/* 图片 */}
                    <div className='bgpho-img'>
                        {category.images.map((src, imgIndex) => (
                            <img draggable="true"  
                            onClick={() => onImageClick(src)} // 点击图片时 dispatch 
                            key={imgIndex} 
                            src={src} 
                            alt={category.title} 
                            />
                        ))}
                    </div>
                </div>
            ))}


        </div>
    )
}

export default Bgphoto
